M
MLOG
React Lazy Loading: Code Splitting dei Componenti per Performance Ottimizzate | MLOG | MLOG ); } export default ImageGallery;

E il componente Image.js:


import React from 'react';

const Image = ({ src, alt }) => {
  return {alt};
};

export default Image;

In questo esempio, ogni immagine è racchiusa in un componente <Suspense>, quindi verrà visualizzato un messaggio di caricamento per ogni immagine mentre è in fase di caricamento. Ciò impedisce che l'intera pagina venga bloccata durante il download delle immagini.

Tecniche e considerazioni avanzate

1. Error Boundaries

Quando si utilizza il lazy loading, è importante gestire i potenziali errori che possono verificarsi durante il processo di caricamento. I limiti di errore possono essere utilizzati per intercettare questi errori e visualizzare un'interfaccia utente di fallback. Puoi creare un componente limite di errore come questo:


import React, { Component } from 'react';

class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // You can also log the error to an error reporting service
    console.error(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return 
Something went wrong.
;
    }

    return this.props.children; 
  }
}

export default ErrorBoundary;

Quindi avvolgi il componente <Suspense> con <ErrorBoundary>:



  Loading...}>

Se si verifica un errore durante il caricamento di MyComponent, <ErrorBoundary> lo intercetterà e visualizzerà l'interfaccia utente di fallback.

2. Server-Side Rendering (SSR) e Lazy Loading

Il lazy loading può essere utilizzato anche in combinazione con il rendering lato server (SSR) per migliorare il tempo di caricamento iniziale della tua applicazione. Tuttavia, richiede alcune configurazioni aggiuntive. Dovrai assicurarti che il server possa gestire correttamente le importazioni dinamiche e che i componenti caricati pigramente siano correttamente idratati sul lato client.

Strumenti come Next.js e Gatsby.js forniscono supporto integrato per il lazy loading e il code splitting in ambienti SSR, semplificando notevolmente il processo.

3. Precaricamento di componenti caricati pigramente

In alcuni casi, potresti voler precaricare un componente a caricamento lento prima che sia effettivamente necessario. Ciò può essere utile per i componenti che probabilmente verranno renderizzati a breve, come i componenti che si trovano sotto la piega ma che probabilmente verranno visualizzati durante lo scorrimento. Puoi precaricare un componente chiamando manualmente la funzione import():


import('./MyComponent'); // Preload MyComponent

Ciò avvierà il caricamento del componente in background, quindi sarà disponibile più rapidamente quando verrà effettivamente renderizzato.

4. Importazioni dinamiche con commenti magici di Webpack

I "commenti magici" di Webpack offrono un modo per personalizzare i nomi dei blocchi di codice generati. Ciò può essere utile per il debug e l'analisi della struttura del bundle della tua applicazione. Per esempio:


const MyComponent = React.lazy(() => import(/* webpackChunkName: "my-component" */ './MyComponent'));

Ciò creerà un blocco di codice denominato "my-component.js" (o simile) invece di un nome generico.

5. Evitare le insidie comuni

Esempi e casi d'uso reali

Il lazy loading può essere applicato a una vasta gamma di scenari per migliorare le performance delle applicazioni React. Ecco alcuni esempi:

Esempio: sito web di e-commerce internazionale

Immagina un sito web di e-commerce che vende prodotti a livello globale. Paesi diversi possono avere valute, lingue e cataloghi di prodotti diversi. Invece di caricare tutti i dati per ogni paese in anticipo, puoi utilizzare il lazy loading per caricare i dati specifici per la posizione dell'utente solo quando visita il sito.


const CurrencyFormatter = React.lazy(() => import(`./CurrencyFormatter/${userCountry}`))
const ProductCatalog = React.lazy(() => import(`./ProductCatalog/${userCountry}`))

function ECommerceSite() {
  const userCountry = getUserCountry(); // Function to determine user's country

  return (
    Loading content for your region...}>
      
      
    
  );
}

Conclusione

Il lazy loading e il code splitting dei componenti sono tecniche potenti per ottimizzare le performance delle applicazioni React. Caricando i componenti solo quando sono necessari, puoi ridurre significativamente il tempo di caricamento iniziale, migliorare l'esperienza utente e migliorare la tua SEO. I componenti React.lazy() e <Suspense> integrati di React semplificano l'implementazione del lazy loading nei tuoi progetti. Adotta queste tecniche per creare applicazioni web più veloci, reattive e coinvolgenti per un pubblico globale.

Ricorda di considerare sempre l'esperienza utente quando implementi il lazy loading. Fornisci interfacce utente di fallback informative, gestisci gli eventuali errori in modo corretto e analizza attentamente le performance della tua applicazione per assicurarti di ottenere i risultati desiderati. Non aver paura di sperimentare con approcci diversi e trovare la soluzione migliore per le tue esigenze specifiche.